<template>
  <div>
    <div class="recommend-title">周末去哪玩</div>
    <ul v-if="showweekendList">
      <li class="item border-bottom" v-for="(item,index) in weekendList" :key="index">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl" alt="img" />
        </div>
        <div class="item-info">
          <p class="item-title ellipsis">{{item.title}}</p>
          <p class="item-desc ellipsis">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
import {mapState} from 'vuex'
export default {
  data() {
    return {
      lastCity:'',
      weekendList: []
    };
  },
  created() {
    this.lastCity = this.city
    this.getweekTable();
  },
  methods: {
    getweekTable() {
      axios.get("/api/index.json?city4=" + this.city).then(res => {
        this.weekendList = res.data.data.weekendList;
        // console.log(res.data.data.weekendList)
      });
    }
  },
  // 计算属性
  computed: {
    showweekendList() {
      return this.weekendList.length;
    },
    ...mapState(['city'])
  },
  activated(){
    if(this.lastCity !== this.city){
      this.lastCity = this.city
      this.getweekTable()
    }
  }
};
</script>
<style scoped>
.recommend-title {
  line-height: 30px;
  background: #eee;
  text-indent: 8px;
}
.item {
  overflow: hidden;
  margin-bottom: 5px;
  /* height: 94px; */
}
.item .item-img-wrapper {
  overflow: hidden;
  height: 0;
  padding-bottom: 33.9%;
}
.item .item-img {
  width: 100%;
}
.item .item-info {
  flex: 1;
  padding: 5px;
}
.item .item-info .item-title {
  padding: 2px;
  font-size: 16px;
  line-height: 30px;
  width: 85%;
}
.item .item-info .item-desc {
  line-height: 15px;
  width: 85%;
  color: rgb(141, 140, 140);
  margin-bottom: 0 0 5px 5px;
}
.item .item-info .item-button {
  margin-top: 10px;
  background: #f0920e;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid #be893f;
  color: #ffffff;
  line-height: 18px;
}
</style>